<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="$refs.userRefs.show()" v-hasPermi="['property:employee:add']">关联员工</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['property:employee:remove']">删除</el-button>
      </el-col>
      <el-col :span="15" style="float: right; height: 40px;">
        <el-form style="float: right; height: 40px;" :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
          <el-form-item label="员工姓名" prop="userName">
            <el-input
              v-model="queryParams.userName"
              placeholder="请输入员工姓名"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"></el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"></el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="employeeList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="员工姓名" align="center" prop="nickName" width="100"/>
      <el-table-column label="性别" align="center" prop="sex" width="80">
        <template slot-scope="scope">
          {{ dict.label.sys_user_sex[scope.row.sex] }}
        </template>
      </el-table-column>
      <el-table-column label="联系电话" align="center" prop="phonenumber" width="120"/>
      <el-table-column label="所在部门" align="left" prop="deptName" width="150" show-overflow-tooltip/>
      <el-table-column label="岗位" align="left" prop="roleNames" show-overflow-tooltip/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['property:employee:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <select-user ref="userRefs" multiple @ok="selectUserOk"/>
  </div>
</template>

<script>

  import { listMixin } from "@/utils/mixins/listMixin";
  import { listEmployee, delEmployee  ,addEmployee } from "@/api/property/employee";
  import SelectUser from "@/views/components/magnifier/selectUser"

  export default {
    name: "Employee",
    mixins:[ listMixin ],
    components:{ SelectUser },
    dicts:['sys_user_sex'],
    data() {
      return {
        // 员工关联表表格数据
        employeeList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          userId: null,
          businessType: null,
          businessId: null
        },
      };
    },
    watch:{
      businessId(v){
        this.handleQuery()
      }
    },
    created() {
      this.getList();
    },
    methods: {
      /** 查询员工关联表列表 */
      getList() {
        this.loading = true;
        this.queryParams.businessType = this.businessType||'-1'
        this.queryParams.businessId = this.businessId||'-1'
        listEmployee(this.queryParams).then(response => {
          this.employeeList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.userId)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        let userIds = row.userId?[row.userId]: this.ids
        let params = {
          businessType:this.businessType,
          businessId:this.businessId,
          userIds: userIds
        }
        let newEmployeeList = this.employeeList.filter(row=> userIds.indexOf(row.userId) != -1)
        let nickNames = newEmployeeList.map(item => item.nickName)
        this.$confirm('是否确认删除员工关联表编号为"' + nickNames + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delEmployee(params);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(() => {});
      },
      selectUserOk(selection){
        if(selection.length > 0){
          let userIds = []
          for(let i in selection){
            userIds.push(selection[i].userId)
          }
          addEmployee({businessType:this.businessType,businessId:this.businessId,userIds:userIds}).then(res=>{
            this.msgSuccess("关联员工成功!")
            this.handleQuery()
          })
        }
      }
    },
    props: {
      businessType: {
        type: String,
        default:""
      },
      businessId: {
        type: String,
        default:""
      },
    }
  };
</script>
